<template>
  <div :class="isFull ? 'd-container-fix' : ''" class="property-paner">
    <component :is="component" :stock="stock" ref="properts"></component>
    <div class="paner-tools">
      <span @click="handleFullScreen" class="tool-item" title="全屏">
        <FullScreenIcon class="d-text-linker" />
      </span>
    </div>
  </div>
</template>

<script>
import { FullScreenIcon } from '@daelui/vdog/dist/icons'
import stock from '../../../service/stock/index'

export default {
  components: {
    FullScreenIcon
  },

  props: {
    stock: {
      type: Object,
      default () {
        return stock
      }
    }
  },

  watch: {
    // 属性组件监听
    'stock.state.layoutPropertyView': function() {
      this.component = stock.state.layoutPropertyView
    }
  },

  data () {
    return {
      // 渲染组件
      component: stock.state.layoutPropertyView,
      // 是否全屏
      isFull: false
    }
  },

  methods: {
    // 全局切换
    handleFullScreen () {
      this.isFull = !this.isFull
    }
  }
}
</script>

<style lang="less">
.property-paner {
  position: relative;
  height: 100%;
  border-radius: 0;
  background: #fff;
  &.d-container-fix {
    position: fixed;
    & + .design-collapse-prop {
      display: none;
    }
    .d-editor-monaco {
      height: calc(100vh - 94px) !important;
    }
  }
}
.paner-tools {
  position: absolute;
  top: 0;
  right: 0;
  .tool-item {
    float: left;
    padding: 12px;
    cursor: pointer;
    svg {
      font-size: 18px;
    }
  }
}
</style>
